<template>
	<view class="form-title-box">
		<view class="form-title">
			<view :class="['title-icon', type]"></view>
			<view class="title-name requir">{{title}}</view>
		</view>
		<view class="desc">
			{{desc}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: () => ''
			},
			desc: {
				type: String,
				default: () => ''
			},
			type: {
				type: String,
				default: () => ''
			}
		}
	}
</script>

<style scoped lang="scss">
	.form-title-box {

		display: flex;
		justify-content: space-between;
		margin-bottom: 32rpx;
	}

	.form-title {
		height: 42rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}

		.scale {
			background: url('@/pages/achievement/static/img/test_name.jpg') 0 0 no-repeat;
			background-size: 100% 100%;
		}

		.type {
			background: url('@/pages/achievement/static/img/test_type.jpg') 0 0 no-repeat;
			background-size: 100% 100%;
		}

		.course {
			background: url('@/pages/achievement/static/img/test_course.jpg') 0 0 no-repeat;
			background-size: 100% 100%;
		}

		.user {
			background: url('@/pages/achievement/static/img/test_user.jpg') 0 0 no-repeat;
			background-size: 100% 100%;
		}

		.result {
			background: url('@/pages/achievement/static/img/test_result.jpg') 0 0 no-repeat;
			background-size: 100% 100%;
		}

		.name {
			background: url('@/pages/achievement/static/img/test_name.jpg') 0 0 no-repeat;
			background-size: 100% 100%;
		}
		.time {
			background: url('@/pages/achievement/static/img/test_time.jpg') 0 0 no-repeat;
			background-size: 100% 100%;
		}

		.title-name {
			font-size: 30rpx;
			font-weight: 600;
			color: #333333;
		}

		.requir {
			display: flex;

			&::after {
				display: block;
				content: '*';
				color: #FE4F54;
				margin-left: 6rpx;
			}
		}

		.desc {
			font-size: 26rpx;
			color: #999999;
		}
	}
</style>
